<!DOCTYPE HTML>
<!--客户端存储数据两种方法：
    localStorage   没有时间限制的数据存储
    sessionStorage  针对一个session的数据存储

-->
<html>

<head>
    <meta charset="utf-8" />
    <!--localStorage方法存储的数据没有时间限制，第二天、第二周或下一年之后，数据依然可用。 -->
    <script type="text/javascript">
        if (localStorage.pageCount) {
            localStorage.pageCount = Number(localStorage.pageCount) + 1;
        } else {
            localStorage.pageCount = 1;
        }
        document.write("visits" + localStorage.pageCount + "time(s).");
    </script>
    <!--sessionstorage方法针对一个session进行数据存储，当用户关闭浏览器窗口后，数据会被删除-->
    <script type="text/javascript">
        if (sessionStorage.pageCount) {
            sessionStorage.pageCount = Number(sessionStorage.pageCount) + 1;
        } else {
            sessionStorage.pageCount = 1;
        }
        document.write("visit" + sessionStorage.pageCount + "time(s) in this session");
    </script>
</head>

<body>
    <p>刷新页面会看到计数器在增长。</p>

    <p>请关闭浏览器窗口，然后再试一次，计数器会继续计数。</p>
</body>

</html>